<link rel="stylesheet" href="views/login/login.css">
<section id="login_module" class="container">
    <form name="myForm">
        <div class="username_part">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2"><i class="fa fa-user"></i></span>
                <input type="text" class="form-control" ng-model="username" name="username" id="username" required
                       ng-minlength="5"
                       ng-maxlength="10"/>
            </div>
            <div ng-messages="myForm.username.$dirty && myForm.username.$error" role="alert">
                <div ng-message="required" class="error_message">You did not enter a field</div>
                <div ng-message="minlength, maxlength" class="error_message">
                    Your username must be between 5 and 10 characters long
                </div>
            </div>
        </div>
        <div class="password_part">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="password" class="form-control" ng-model="pass" name="pass" id="pass" required
                       ng-minlength="5"
                       ng-maxlength="10"/>
            </div>
            <div ng-messages="myForm.pass.$dirty && myForm.pass.$error" role="alert">
                <div ng-message="required" class="error_message">Password is required</div>
                <div ng-message="minlength, maxlength" class="error_message">
                    Your password must be between 5 and 10 characters long
                </div>
            </div>
        </div>
    </form>
</section>